<template>
    <div class="manage">
        <div class="nav">
            <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :router="true">
                <el-menu-item index="1" :route="{name:'store'}">
                    <span slot="title">店铺管理</span>
                </el-menu-item>
                <el-menu-item index="2" :route="{name:'category'}">
                    <span slot="title">店铺分类管理</span>
                </el-menu-item>
                <el-menu-item index="3" :route="{name:'commodity'}">
                    <span slot="title">商品管理</span>
                </el-menu-item>
                <el-menu-item index="4" :route="{name:'coupon'}">
                    <span slot="title">优惠劵管理</span>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="content">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }
}
</script>

<style scoped>
    .manage{
        display: flex;
        height: 100vh;

    }

    .nav{
        width:15%;
        height: 100%;
    }

    .nav > ul{
        height: 100%;
    }

    .content{
        padding: 10px;

        flex:1;
    }

</style>